WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > MVVM API > Worked Example - CustomRenderableSeries in MVVM
Worked Example - CustomRenderableSeries in MVVM

Worked Example: CustomRenderableSeries in MVVM

If you created a CustomRenderableSeries you can also extend the SciChart MVVM API to create and manipulate this series type from a ViewModel. For this, you must create a ViewModel type that inherits BaseRenderableSeriesViewModel and override the ViewType property. Other custom properties can be added as well and bound to any properties of the underlying series type.

Continuing with the SplineLineRenderableSeries type created in the Custom Series article, we can create a ViewModel for it, extending the MVVM API:

Given the SplineLineRenderableSeries type created in Custom Series, we now create a ViewModel, so we can manipulate via the MVVM API:

Code – SplineLineRenderableSeriesViewModel

CustomRenderableSeries in MVVM
Copy Code 
public class SplineRenderableSeriesViewModel : BaseRenderableSeriesViewModel
{
       // Tell SciChart what type of RenderableSeries you want to instantiate
       public override Type ViewType
       {
             get { return typeof(SplineLineRenderableSeries); }
       }
}

Code – ViewModel

Next, in your ViewModel, declare the SplineRenderableSeriesViewModel as you would any other built-in RenderableSeriesViewModel.

CustomRenderableSeries in MVVM
Copy Code 
void Foo()
{
       _splineData = new XyDataSeries<double, double>() { SeriesName = "Spline" };
       var data = DataManager.Instance.GetSinewave(1.0, 0.0, 100, 25);
       _splineData.Append(data.XData, data.YData);
       RenderSeries = new List<IRenderableSeriesViewModel>()
       {
             new SplineRenderableSeriesViewModel()
             {
                    DataSeries = _splineData,
                    StyleKey = "splineSeriesStyle"
             }
       };
}

// Where
public IEnumerable<IRenderableSeriesViewModel> RenderSeries { get; private set; }

Code – XAML

Finally, apply the SeriesBinding and any style. It is imperative to base any style on MvvmDefaultRenderableSeries style, or the series will not show. To do this, in your View you will need a resource-dictionary and to pull in the SciChart default styles:

CustomRenderableSeries in MVVM
Copy Code 
<UserControl.Resources>               

   <ResourceDictionary>
  
      <!-- Merged Dictionary is required for BasedOn attribute -->
      <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="/SciChart.Charting;component/Themes/Default.xaml"/>
      </ResourceDictionary.MergedDictionaries>

      <!-- The style for the custom renderable series -->
      <!-- IMPORTANT! BasedOn must equal MvvmDefaultRenderableSeriesStyle to
      <!-- pick up the defaults -->
      <Style TargetType="local:SplineLineRenderableSeries" x:Key="splineSeriesStyle"
               BasedOn="{StaticResource MvvmDefaultRenderableSeriesStyle}">
         <Setter Property="IsSplineEnabled" Value="True"/>
         <Setter Property="UpSampleFactor" Value="10"/>
         <Setter Property="Stroke" Value="DarkGreen"/>
         <Setter Property="StrokeThickness" Value="2"/>
         <Setter Property="PointMarkerTemplate">
            <Setter.Value>
               <ControlTemplate>
                  <s:EllipsePointMarker Fill="White" Stroke="DarkGreen"/>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

   </ResourceDictionary>       

</UserControl.Resources>